<template>
  <div class="song">
    <NavBar />
    <div class="main">
      <el-row>
        <el-col :span="17">
          <div class="s_item">
            <div class="left">
              <div class="photo">
                <img src="http://p1.music.126.net/6EX0yj-r5GBLzSNU20rrmQ==/109951165791933542.jpg?param=130y130" alt="">
              </div>
              <a href="#">生成外链播放器</a>
            </div>
            <div class="right">
              <div class="title">
                <i class="wyy wyy-danquxunhuan"></i>
                {{title}}
              </div>
              <div class="intro">
                <img src="http://p1.music.126.net/O-DlMgCpw3XxQSu3-mUnMA==/109951165566196665.jpg?param=40y40" alt="">
                <span><a href="#">创建者</a></span>
                <span>2018-2-12&nbsp;创建</span>
              </div>
              <div class="btn_wrap">
                <ul>
                  <li class="bofang">
                    <a href="javascript:;">
                    <i class="wyy wyy-bofang1"></i>
                    <span>播放</span>
                    <i class="el-icon-plus"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                    <i class="el-icon-folder-add"></i>收藏
                    </a>
                  </li>
                  <li>
                    <a href="#">
                    <i class="wyy wyy-fenxiang"></i>分享
                    </a>
                  </li>
                  <li>
                    <a href="#">
                    <i class="wyy wyy-xiazai"></i>下载
                    </a>
                  </li>
                  <li>
                    <a href="#">
                    <i class="wyy wyy-xinxi"></i>(20053)
                    </a>
                  </li>
                </ul>
              </div>
              <div class="label" >
                <span>标签：</span>
                <el-button>轻音乐</el-button>
                <el-button>轻音乐</el-button>
                <el-button>轻音乐</el-button>
              </div>
              <div class="bg">
                <span>介绍:</span>
                <p class="bg-max">
                承载了太多期许的目光怎能轻易辜负就算星星碎掉 溢出的光也是光芒万丈最后的冲刺阶段，愿你以梦为马不负韶华，愿你热勇一腔，愿你可以成为自己想要的模样，愿你不负众望，中考加油，什么都不要去想，再努力一下，你可以的，那些孤注一掷退无可退的岁月都将烙上青春的回忆，走下去，前程万里✨没有躺赢的命，那就站起来奔跑
                “知命不惧，日月自新”
                “若结局不为你所愿，就在尘埃落定前奋力一博”
                加油陌生人！持续更新哦~
                为保证质量，会更新的慢一点~

</p>
              </div>
              <!-- <p><span>介绍:</span><span class="bg"></span>
</p> -->
            </div>
          </div>
        </el-col>
        <el-col :span="7" class="right_box">
          <div class="box">
            <div class="header">包含这首歌的歌单</div>
            <div class="container">
              <ul>
                <li>
                  <img src="http://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="">
                  <div class="text_box">
                    <p class="title">耳朵福利：百首好听宝藏热歌精选</p>
                    <p class="author"><span>by</span> 真咸鱼饼干</p>
                  </div>
                </li>
                <li>
                  <img src="http://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="">
                  <div class="text_box">
                    <p class="title">耳朵福利：百首好听宝藏热歌精选</p>
                    <p class="author"><span>by</span> 真咸鱼饼干</p>
                  </div>
                </li>
                <li>
                  <img src="http://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="">
                  <div class="text_box">
                    <p class="title">耳朵福利：百首好听宝藏热歌精选</p>
                    <p class="author"><span>by</span> 真咸鱼饼干</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/index'
import { PlayListDetail } from '@/api/SongList'
export default {
  name: 'Details',
  components: {
    NavBar
  },
  created () {
    this.PlayListDetail()
  },
  data () {
    return {
      title: ''
    }
  },
  methods: {
    async PlayListDetail (offset) {
      const res = await PlayListDetail({
        id: this.getUrlSearch('id')
      })
      console.log(res)
      this.title = res.data.playlist.name
    },
    getUrlSearch (name) {
    // 未传参，返回空
      if (!name) return null
      // 查询参数：先通过search取值，如果取不到就通过hash来取
      var after = window.location.search
      after = after.substr(1) || window.location.hash.split('?')[1]
      // 地址栏URL没有查询参数，返回空
      if (!after) return null
      // 如果查询参数中没有"name"，返回空
      if (after.indexOf(name) === -1) return null

      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      // 当地址栏参数存在中文时，需要解码，不然会乱码
      var r = decodeURI(after).match(reg)
      // 如果url中"name"没有值，返回空
      if (!r) return null

      return r[2]
    }
  }

}
</script>

<style lang="less" scoped>
a{
text-decoration:none;
color:#333;
}
.song {
  .main {
    width: 980px;
    margin: 0 auto;
    border-left: 1px solid #cfcfcf;
    border-right: 1px solid #cfcfcf;
    .s_item {
      padding: 40px 30px 40px 39px;
      .left {
        margin-right: 20px;
        float: left;
        width: 206px;
        height: 206px;
        text-align: center;
        .photo {
          img {
            border: 4px solid #ddd;
          }
        }
        a {
          font-size: 12px;
          color: #0c73c2;
        }
      }
      .right {
        float: left;
        .title {
              line-height: 24px;
              font-size: 20px;
              font-weight: normal;
          .wyy {
            color: #c20c0c;
          }
        }
        .intro {
          margin-top: 25px;
          height: 75px;
          img{
            width: 45px;
            height: 45px;
            float: left;
          }
          span {
            float: left;
            margin: 15px 0 5px 15px;
          }
        }

        .btn_wrap {
          ul {
            li {
              padding: 6px;
              margin-right: 5px;
              font-size: 13px;
              float: left;
              border: 1px solid rgb(182, 181, 181);
              background-color: #eee;
              border-radius: 4px;
              vertical-align: middle;
              span {
                margin-right: 5px;
                padding-right: 5px;
                border-right: 1px solid rgb(182, 181, 181);
              }
              i {
                font-size: 16px;
                margin-right: 5px;
              }
            }
            .bofang {
              background-color: #388bdf;
            }
          }
        }
      }
    }
    .right_box {
      padding: 20px 40px 30px;
      border-left: 1px solid #cfcfcf;
      .container {
        ul {
          li {
            width: 100%;
            height: 50px;
            margin-top: 15px;
            img {
              float: left;
              width: 50px;
              height: 50px;
            }
            .text_box {
              padding-left: 8px;
              float: left;
              p {
                width: 104px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 5px;
              }
              .title {
                font-size: 12px;
              }
              .author {
                font-size: 12px;
                color: #666;
              }
            }
          }
        }
      }
    }
  }
}
.label{
       margin:20px 0 0 0 ;
        }
.bg{
    font-size: 14px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
     }
     .bg-max{
       width: 150px;
       height: 260px;
     }
</style>
